<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  figure {
    display: grid;
    cursor: pointer;
    border-radius: 50%;
  }

  figure>* {
    grid-area: 1/1;
    border-radius: 50%;
  }

  figure figcaption {
    color: #D5DED9;
    background: radial-gradient(50% 50%, #8C2318 50%, #0000 90%);
    display: grid;
    place-items: center;
    padding: 22%;
  }

  figure img {
    --g: radial-gradient(50% 50%, #000 97%, #0000) no-repeat;
    -webkit-mask:
      var(--g) 100% 50%,
      var(--g) 50% 100%,
      var(--g) 0% 50%,
      var(--g) 50% 0%,
      var(--g) calc(50%*(1 + cos(45deg))) calc(50%*(1 + sin(45deg))),
      var(--g) calc(50%*(1 - cos(45deg))) calc(50%*(1 + sin(45deg))),
      var(--g) calc(50%*(1 + cos(45deg))) calc(50%*(1 - sin(45deg))),
      var(--g) calc(50%*(1 - cos(45deg))) calc(50%*(1 - sin(45deg)));
    -webkit-mask-size: 100% 100%;
    transition: .4s;
  }

  figure:hover img {
    -webkit-mask-size: 20% 20%;
  }

  @supports not (opacity:sin(45deg)) {
    figure img {
      -webkit-mask:
        var(--g) 100% 50%,
        var(--g) 50% 100%,
        var(--g) 0% 50%,
        var(--g) 50% 0%,
        var(--g) 85.35% 85.35%,
        var(--g) 14.65% 85.35%,
        var(--g) 85.35% 14.65%,
        var(--g) 14.65% 14.65%;
    }
  }

  body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    grid-auto-flow: column;
    background: #425a52;
  }

  figure figcaption {
    font-family: sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
  }
</style>

<body>
  <figure>
    <img src="https://picsum.photos/id/582/250/250" alt="A wolf">
    <figcaption>狼 </figcaption>
  </figure>
  <figure>
    <img src="https://picsum.photos/id/1074/250/250" alt="A Lioness">
    <figcaption>狮子</figcaption>
    </figcaption>
  </figure>
</body>

</html>